<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="cardList">
      <el-row>
        <el-col>
          <el-button type="primary" @click="addUser()">添加角色</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%;margin-top:15px;"
        border
        stripe
        class="tableTop"
      >
        <el-table-column width="40" label="*" type="expand">
          <slot slot-scope="scope">
            <el-row
              v-for="(item1,index) in scope.row.childen"
              :key="item1"
              :class="['borderButtom',index===0?'borderTop':'','divCenter'] "
            >
              <el-col :span="5">
                <el-tag class="elTag" type="danger">{{item1.autName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="19">
                <el-row v-for="item2 in item1.child" :key="item2" class="borderButtom divCenter">
                  <el-col :span="6">
                    <el-tag type="warning" class="elTag">{{item2.autName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      type="success"
                      v-for="item3 in item2.child"
                      :key="item3"
                      class="elTag"
                    >{{item3.autName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </slot>
        </el-table-column>
        <el-table-column type="index" width="60" label="#"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="info" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-row justify="center">
              <el-button type="success" icon="el-icon-edit" size="mini" :xs="8">编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :xs="8"
                @click="deleteUser(scope.row)"
              >删除</el-button>
              <el-tooltip content="分配权限" placement="top" :xs="8">
                <el-button type="warning" icon="el-icon-s-help" size="mini">分配权限</el-button>
              </el-tooltip>
            </el-row>
          </slot>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { type } from "os";
export default {
  created() {
    this.getDataList();
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getDataList() {
      this.tableData = [
        {
          childen: [
            {
              autName: "商品列表",
              child: [
                {
                  autName: "商品分类",
                  child: [
                    {
                      autName: "添加分类"
                    },
                    {
                      autName: "删除分类"
                    },
                    {
                      autName: "管理分类"
                    },
                    {
                      autName: "删除分类"
                    },
                    {
                      autName: "回复分类"
                    },
                    {
                      autName: "删除分类"
                    }
                  ]
                },
                {
                  autName: "删除分类",
                  child: [
                    { autName: "删除分类" },
                    { autName: "删除分类" },
                    { autName: "删除分类" }
                  ]
                },
                {
                  autName: "删除分类",
                  child: [
                    { autName: "删除分类" },
                    { autName: "删除分类" },
                    { autName: "删除分类" }
                  ]
                }
              ]
            },
            {
              autName: "订单列表",
              child: [{ autName: "商品分类", child: [{ autName: "删除分类" }] }]
            },
            {
              autName: "权限管理",
              child: [{ autName: "商品分类", child: [{ autName: "删除分类" }] }]
            },
            {
              autName: "用户管理",
              child: [{ autName: "商品分类", child: [{ autName: "删除分类" }] }]
            }
          ],
          info: "主管",
          name: "王小虎,"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "项目经理",
          name: "王小名,"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "张家界",
          name: "王虎"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "运营",
          name: "小虎"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "开发",
          name: "王小虎,"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "技术负责人",
          name: "王小名,"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "技术负责人",
          name: "王虎"
        },
        {
          childen: [{ autName: "商品列表" }],
          info: "技术负责人",
          name: "小虎"
        }
      ];
    },
    addUser() {
      this.$message({ message: "待开发", type: "success" });
    },
    deleteUser(data) {
      this.$message({ message: "删除成功", type: "success" ,duration:1000});
    }
  }
};
</script>
<style scoped>
.divCenter {
  display: flex;
  align-items: center;
}
.borderTop {
  border-top: 1px solid #eee;
}
.borderButtom {
  border-bottom: 1px solid #eee;
}
.cardList {
  margin-top: 15px;
}
.elTag {
  margin: 7px;
}
</style>